<template>
    <div class="page dealEmergencyApply-page" data-page="answerdetails">
        <div class="link-page-nav">
            <span class="link" @click=$root.backToTab()>
                <i class=" iconfont icon-APPicon_guanbi" style="font-size: 16px;"></i>
            </span>

        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">答案与解析

            </div>
        </div>
        <div class="page-content" style="height: calc(100% - 44px);">
            <div class="swiper-container" id="answer-swiper_{{getNewId}}">
                <div class="swiper-wrapper" id="swiperInner_{{getNewId}}">

                </div>
            </div>
            <div class="slideAllAnswer" id="slideAllAnswer_{{getNewId}}" @click="slideAllAnswer">
                <span>当前第{{activeIndex}}题/总{{total}}题</span>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                total: 20,
                activeIndex: 1,
                swiper: {},
                getNewId: (new Date()).getTime(),
                initialSlide:0
            }
        },
        mounted() {
            let self = this;
            self.lookDeatils()
            jQuery(`#swiperInner_${self.getNewId}`).on('click', 'video', function () {
                if (!jQuery(this).paused) {
                    jQuery(this).siblings('.endVideo').show()
                    setTimeout((res) => {
                        jQuery(this).siblings('.endVideo').hide()
                    }, 3000)
                }
            })
            //暂停播放
            jQuery(`#swiperInner_${self.getNewId}`).on('click', '.endVideo', function () {
                jQuery(this).siblings('video')[0].pause();
                jQuery(this).siblings('i').show()
                jQuery(this).hide()
            })
            //点击播放
            jQuery(`#swiperInner_${self.getNewId}`).on('click', '.playVideo', function () {
                let video = jQuery(this).siblings('video')[0]
                let self = this
                //播放暂停
                video.addEventListener('pause', () => {
                    jQuery(this).show()
                })

                jQuery(".playVideo").each(function () {
                    if (this === self) return
                    if (!jQuery(this).siblings('video')[0].paused) {
                        jQuery(this).siblings('video')[0].pause();
                    }
                });
                if (jQuery(this).siblings('video')[0].paused) {
                    jQuery(this).siblings('video')[0].play();
                    jQuery(this).hide()

                } else {
                    jQuery(this).siblings('video')[0].pause();
                }
            })
        },
        methods: {
            lookDeatils: function (e) {
                let self = this;
                let html = ''
                let params = { examDetailId: this.$route.params.id }
                Dao.getExamQuestionByExamId(params, function (res) {
                    self.total = res.length
                    for (let i = 0; i < res.length; i++) {
                        html += ` <div class="swiper-slide">`
                        html += ` <div class="swiper-slide-inner">`
                        html += `<div class="swiper-slide-inner-box">`
                        html += `     <div class="exam-type">`
                        html += `           <span>${res[i].questionType == 1 ? '判断题' : (res[i].questionType == 2 ? '单选题' : "多选题")}</span>`
                        html += `         <span>${res[i].questionScore}分</span>`
                        html += `    </div>`
                        html += ` <div style="margin-bottom:15px">${i + 1}.${res[i].content}</div>`
                        html += ` <div class="item-resources">`
                        if (res[i].contentPics != '') {
                            let imgArr = res[i].contentPics.split(',')
                            for (let k = 0; k < imgArr.length; k++) {
                                html += `<img src="${imgArr[k]}" alt="" style="margin-bottom:10px">`
                            }
                        }

                        html += `<div class="${res[i].video == '' ? 'video-content-hide' : 'video-content'}">`
                        html += `   <video src="${res[i].video}"width="100%"></video>`
                        html += `  <i class="iconfont icon-bofang playVideo"></i>`
                        html += ` <i class="iconfont icon-zanting endVideo" style="display:none"></i>`
                        html += ` </div>`

                        html += `</div>`
                        let rightAnswer = []
                        if (res[i].optionList && res[i].optionList.length > 0) {
                            html += `<ul class="answer-items ${res[i].questionType == 3 ? 'selectType' : ''} ">`
                            for (let j = 0, len = res[i].optionList.length; j < len; j++) {
                                let item = res[i].optionList[j]
                                if(res[i].questionType ==1){
                                    if (item.isAnswer == 1) {
                                    rightAnswer.push(item.optionContent)
                                }
                                }else{
                                    if(item.isAnswer==1){
                                        rightAnswer.push(item.optionMark)
                                    }
                                   
                                }
                                
                                html += `<li>`
                                if (res[i].answer.indexOf(item.optionMark) > -1) {
                                    if (res[i].result == 0) {
                                        html += `<div class="item-radio-l item-radio-select-no">${res[i].questionType == 1?'':item.optionMark}</div>`
                                    } else if (res[i].result == 2) {
                                        html += `<div class="item-radio-l item-radio-select-success">${res[i].questionType == 1?'':item.optionMark}</div>`
                                    } else {
                                        html += `<div class="item-radio-l item-radio-select-error">${res[i].questionType == 1?'':item.optionMark}</div>`
                                    }
                                } else {
                                    html += `<div class="item-radio-l">${res[i].questionType == 1?'':item.optionMark}</div>`
                                }

                                html += `<div class="item-radio-r">${item.optionContent}</div>`
                                html += ` </li>`
                            }

                            html += `</ul>`
                            html += ` <div class="item-answer-result">`
                            html += ` <span>答案：${rightAnswer.join('、')}</span><span class="${res[i].result == 1 ? 'item-answer-result-error' : 'item-answer-result-success'}">您选择了：${res[i].questionType == 1?res[i].answer=='A'?'正确':'错误':res[i].answer}</span>`
                            html += ` </div>`
                            html += ` </div>`
                            html += `<div style="margin:20px 0 0 20px;">`
                            html += ` <p style="font-size:16px;color:#000000;margin-bottom:15px">解析</p>`
                            html += ` <div><div>${res[i].analysisContent==''?'无':res[i].analysisContent}</div>`
                            if (res[i].analysisPics != '') {
                                let imgArr = res[i].analysisPics.split(',')
                                for (let k = 0; k < imgArr.length; k++) {
                                    html += `<img src="${imgArr[k]}" alt="" style="width:100%;margin-bottom:10px">`
                                }
                            }

                            html += ` </div>`
                            html += `</div>`
                            html += `</div>`
                            html += ` </div>`
                        }
                    }
                    $(`#swiperInner_${self.getNewId}`).append(html)
                    $(`#slideAllAnswer_${self.getNewId}`).html(`
                                    <span>当前题${self.initialSlide+1}</span>/<span>总题数${self.total}</span>`)
                    self.swiper = new Swiper(`#answer-swiper_${self.getNewId}`, {
                        slidesPerView: 1,
                        initialSlide:Number(self.initialSlide),
                        loop: false,
                        autoplay: false,
                        on: {
                            slideChangeTransitionEnd: function () {
                                $(`#slideAllAnswer_${self.getNewId}`).html(`
                                        <span>当前题${this.activeIndex + 1}</span>/<span>总题数${self.total}</span>`)
                            },
                        }
                    });
                })
            },
            slideAllAnswer: function () {
                let idnex = this.swiper.activeIndex
                let self = this;
                let params = { examDetailId: self.$route.params.id }
                Dao.getExamQuestionNumberByExamId(params, function (res) {
                    let html = ''
                    let index = self.swiper.activeIndex
                    html += ` <div class="popup org-popup">
                            <div class="rdsp-org-popup">
                                <div class="rdsp-org-popup-top" style="text-align:center;">
                                    <span style="font-size:16px;color: #2471CA;text-align: center;display:inline-block;
        margin-right:10px;font-size:16px">当前题${index + 1}</span>/ <span style="color:#000;margin-left:10px;font-size:16px"> 总题数${self.total}</span>
                                    <div class="rdsp-org-list-tags" id="orgRecord_list" style="border:0">
                                        <ul class="popup-items" > `
                    for (let i = 0; i < self.total; i++) {
                        html += `<li class="slidetoLi ${res[i].result == 0 ? 'noanswer' : (res[i].result == 2 ? 'hasAnswer' : 'errorpup')} ${index === i ? 'thisLi' : ""}">
                            <div style=" width: 100%;
    padding-top: 100%;
  display: block;
    position: relative;"><span style="   position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;">${i+1}</span></div>
                                    </li>`
                    }

                    `</ul> `
                    html += `  </div>`
                    html += ` </div>`

                    html += ` <div class="initials"><ul><li></li></ul></div>`
                    html += ` </div>`
                    html += ` </div>`
   
                    creatNewPopup(html, function () {
                         jQuery('.hasAnswer').css({
                            'float': 'left',
                            'margin-left': '3.75%',
                            'width': '10%',
                            'text-align': 'center',
                            'color': '#FFFFFF',
                            'background': '#69BA71',
                            'border-radius': '50%',
                            'margin-bottom': '10px',
                            'position': 'relative',
                           'box-sizing': "border-box"
                        })
                        jQuery('.errorpup').css({
                            'float': 'left',
                            'margin-left': '3.75%',
                            'width': '10%',
                          
                            'text-align': 'center',
                            'color': '#FFFFFF',
                            'background': '#E07762',
                            'border-radius': '50%',
                           
                            'margin-bottom': '10px',
                            'position': 'relative',
                           'box-sizing': "border-box"

                        })
                        jQuery('.thisLi').css({
                            'border': '1px solid #2471CA'

                        })
                        jQuery('.noanswer').css({
                            'float': 'left',
                            'margin-left': '3.75%',
                            'width': '10%',
                            'text-align': 'center',
                            'color': '#081824',
                            'background': 'rgba(241,241,241,1)',
                            'border-radius': '50%',
                            'margin-bottom': '10px',
                            'position': 'relative',
                           'box-sizing': "border-box"

                        })
                    })
                    jQuery('body .slidetoLi').each(function (i) {
                        jQuery(this).click(function () {
                            app.popup.close();
                            $(`#swiperInner_${self.getNewId}`).html('')
                            self.initialSlide=i
                            self.lookDeatils()            
                        })
                    })
                })


            }
        },
    }
</script>
<style scoped>
    
    .link {
        color: #000000;
        font-size: 30px;
    }

    .exam-content {
        padding: 20px;
    }

    .result-name {
        font-size: 14px;
    }

    .exam-details {
        background-color: #fff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 20px 20px 0 20px;
    }

    .exam-details img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .exam-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #F1F1F1;
        color: #999999;
        padding: 20px;
        font-size: 14px;
        margin: 0 -20px;
    }

    .exam-result div p:nth-child(2) {
        font-size: 16px;
        color: #333333;
    }

    .exam-total {
        margin: 30px 0 30px;
        background: url(../../../img/answer.png) no-repeat;
        height: 99px;
        background-size: contain;
        color: rgba(105, 186, 113, 1);
        line-height: 99px;
        font-size: 16px;

    }

    .exam-total span {
        color: rgba(105, 186, 113, 1);
        font-size: 44px;
    }

    .exam-typename {
        margin: 30px 0;
    }

    .tip {
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        margin-top: 20px;
    }

    .exam-name {
        border-bottom: 1px solid rgba(153, 153, 153, 1);
        margin: 0 -20px;
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 20px;
    }

    .look-answer button {
        border: 0;
        background-color: #2471CA;
        color: #FFFFFF;
        height: 44px;
        line-height: 44px;
        border-radius: 10px;
        margin-top: 20px;
    }

    .link {
        color: #000000;
        font-size: 30px;
    }

    .swiper-container {
        height: calc(100% - 102px);
    }

    .swiper-slide {
        width: 100% !important;
        height: 100%;
    }

    .swiper-slide-inner {
        height: calc(100% - 40px);
        overflow-y: auto;
        margin: 20px 20px 0;
    }

    .swiper-slide-inner-box {
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        padding: 0 20px 40px 20px;
    }

    .swiper-slide-inner img {
        width: 100%;
    }

    .item-resources {
        text-align: center;
    }

    .answer-items li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20px;
    }


    .selectType .item-radio-l {
        border-radius: 0;
    }

    .item-radio-l {
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 50%;
        margin-right: 25px;
    }

    .multiple-topics .item-radio-l {
        border-radius: 0%;
    }

    .item-radio-r {
        flex: 1;
    }

    .item-radio-select-error {
        background-color: #E07762;
        color: #FFFFFF;
    }

    .item-radio-select-success {
        background-color: #69BA71;
        color: #FFFFFF;
    }

    .item-radio-select-no {
        background-color: #FFFFFF;
        color: #000;
    }

    .item-answer-result {
        text-align: center;
        background: rgba(241, 241, 241, 1);
        border-radius: 4px;
        line-height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        flex-wrap: wrap;
    }

    .item-answer-result-error {
        color: #E07762;
    }

    .item-answer-result-success {
        color: #000;
    }

    .exam-type {
        margin: 20px 0;
    }

    .exam-type span:nth-child(1) {
        display: inline-block;
        background: rgba(36, 113, 202, .1);
        border-radius: 2px;
        padding: 4px 16px;
        color: rgba(36, 113, 202, 1);

    }

    .exam-type span:nth-child(2) {
        display: inline-block;
        background: rgba(36, 113, 202, .1);
        border-radius: 2px;
        padding: 4px 20px;
        color: rgba(36, 113, 202, 1);

    }

    .slideAllAnswer {
        text-align: center;
        height: 44px;
        line-height: 44px;
        background: rgba(241, 241, 241, 1);
        font-size: 14px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .slideAllAnswer span:nth-child(1) {
        color: rgba(36, 113, 202, .6);
        margin-right: 10px;
    }

    .slideAllAnswer span:nth-child(2) {
        color: #000000;
        margin-left: 10px;
    }

    .video-content-hide {
        display: none;
    }

    .video-content {
        position: relative;
    }

    .video-content i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 44px;
    }
</style>